<template>
    <!-- 属性表格公用 -->
    <div>
        <ul>
            <template v-for="item in data">
                <li v-if="item.type == 'slot'" :key="item.id" :prop="item.prop">
                    <div>{{ item.label }}</div>
                    <slot :name="item.prop" :item="item" />
                </li>

                <li v-if="item.type == 'cascader'" :key="item.id" :prop="item.prop">
                    <div>{{ item.label }}</div>
                    <el-cascader
                        ref="cascaderHandle"
                        v-model="postData[item.prop]"
                        class="tableInput"
                        style="padding:0;width:58%;margin:2px 0 0 8px"
                        :show-all-levels="false"
                        :options="cascader[item.prop]"
                        :props="{ checkStrictly: true, value: 'id', label: 'name' }"
                        @change="blurUnit(postData[item.prop], item.prop)"
                    >
                    </el-cascader>
                </li>

                <li v-if="item.type == 'text'" :key="item.id" :prop="item.prop">
                    <div>{{ item.label }}</div>
                    <div v-if="item.prop == 'type'">{{ postData.typeName }}</div>
                    <div v-else>{{ postData[item.prop] }}</div>
                </li>

                <li v-if="item.type == 'input'" :key="item.id" :prop="item.prop">
                    <div>{{ item.label }}</div>
                    <el-input
                        v-if="item.textType == 'number'"
                        class="tableInput"
                        oninput="value=value.replace(/^\.+|[^\d.]/g,'')"
                        @blur="blurUnit"
                        v-model.trim="postData[item.prop]"
                        style="padding:0;width:58%;margin:2px 0 0 8px"
                        placeholder="请输入"
                    >
                    </el-input>

                    <el-input
                        v-else
                        @blur="blurName(postData[item.prop], item.prop)"
                        class="tableInput"
                        v-model="postData[item.prop]"
                        style="padding:0;width:58%;margin:2px 0 0 8px"
                        placeholder="请输入"
                    ></el-input>
                </li>

                <li v-if="item.type == 'unit'" :key="item.id" :prop="item.prop">
                    <div>{{ item.label }}</div>
                    <!-- <div v-if="item.noEdit" style="width:113px">{{postData[item.prop]}}</div>  -->
                    <el-input
                        :disabled="item.noEdit ? true : false"
                        @input="blurUnit(postData[item.prop], item.prop)"
                        class="tableInput"
                        style="padding:0;width:40%;margin:2px 0 0 8px"
                        v-model="postData[item.prop]"
                        placeholder="请输入"
                    ></el-input>
                    <el-select
                        v-if="item.unitEdit"
                        :disabled="false"
                        v-model="postData[item.unitunit]"
                        @focus="focus(postData[item.unitunit])"
                        @change="changeUnit(postData[item.unitunit], item.prop)"
                        class="tableInput unit"
                        popper-class="unit"
                        style="width:19%;padding: 2px 0px 0 4px;"
                        placeholder="请选择"
                    >
                        <el-option v-for="val in option" :key="val.value" :label="val.label" :value="val.value"> </el-option>
                    </el-select>
                    <div v-else style="width:20px">{{ item.unit }}</div>
                </li>

                <li v-if="item.type == 'radio'" :key="item.id" :prop="item.prop">
                    <div>{{ item.label }}</div>
                    <div style="padding: 8px 0 0 8px;">
                        <el-radio
                            class="tableInput"
                            @change="blurUnit(postData[item.prop], item.prop)"
                            style="color:#fff; font-size: 12px;"
                            v-model="postData[item.prop]"
                            :disabled="item.prop == 'clampToGround' ? true : false"
                            :label="true"
                            >是</el-radio
                        >
                        <el-radio
                            class="tableInput"
                            @change="blurUnit(postData[item.prop], item.prop)"
                            style="color:#fff; font-size: 12px;"
                            v-model="postData[item.prop]"
                            :disabled="item.prop == 'clampToGround' ? true : false"
                            :label="false"
                            >否</el-radio
                        >
                    </div>
                </li>
                <li v-if="item.type == 'select'" :key="item.id" :prop="item.prop">
                    <div>{{ item.label }}</div>
                    <el-select
                        v-if="item.prop == 'type'"
                        :disabled="$store.state.dialogVisible == true ? false : true"
                        class="tableInput"
                        style="width:61%;padding: 2px 0px 0 8px;"
                        v-model="postData[item.prop]"
                        placeholder="请选择"
                    >
                        <el-option v-for="val in optionData.type" :key="val.index" :label="val.label" :value="val.value"> </el-option>
                    </el-select>
                    <template v-else>
                        <el-select v-if="postData.type == 'polyline'" class="tableInput" style="width:61%;padding: 2px 0px 0 8px;" v-model="postData[item.prop]" placeholder="请选择">
                            <el-option v-for="val in optionData[item.prop]" :key="val.value" :label="val.label" :value="val.value"> </el-option>
                        </el-select>
                        <el-select v-else class="tableInput" style="width:61%;padding: 2px 0px 0 8px;" v-model="postData.materialType" placeholder="请选择">
                            <el-option v-for="val in optionData[item.prop]" :key="val.value" :label="val.label" :value="val.value"> </el-option>
                        </el-select>
                    </template>
                </li>

                <li v-if="item.type == 'slider'" :key="item.id" :prop="item.prop">
                    <div>{{ item.label }}</div>
                    <el-slider
                        class="tableInput"
                        v-model="postData[item.prop]"
                        :step="item.step ? item.step : 1"
                        :min="item.min"
                        :max="item.max"
                        @change="changeSlider(postData[item.prop], item.prop)"
                        style="width:64%; height: 30px;padding:0 20px 0 15px"
                    ></el-slider>
                </li>

                <li v-if="item.type == 'color'" :key="item.id" :prop="item.prop">
                    <div>{{ item.label }}</div>
                    <colorPicker defaultColor="#fff" v-model="postData[item.prop]" />
                    <!-- <el-color-picker
                      v-model="postData[item.prop]"
                      :predefine="predefineColors"
                      style="padding:2px 0 0 8px">
                    </el-color-picker> -->
                </li>
            </template>
        </ul>
    </div>
</template>
<script>
export default {
    props: {
        title: {
            type: String,
            default: ''
        },
        postData: {
            type: Object,
            required: true,
            default: {}
        },
        data: {
            type: Array,
            default: []
        },
        optionData: {
            // 下拉数据
            type: Object,
            default: () => {
                return {}
            }
        },
        cascader: {
            // 级联
            type: Object,
            default: () => {
                return {}
            }
        }
    },
    data() {
        return {
            option: [
                { label: '亩', value: '0' },
                { label: 'm²', value: '1' },
                { label: '公顷', value: '2' }
            ],
            predefineColors: [
                '#ffffff',
                '#000',
                '#8E8E8E',
                '#EA0000',
                '#FF359A',
                '#FF00FF',
                '#9F35FF',
                '#6A6AFF',
                '#2894FF',
                '#00FFFF',
                '#1AFD9C',
                '#28FF28',
                '#9AFF02',
                '#F9F900',
                '#F9F900',
                '#FFA042',
                '#FF5809',
                '#B87070',
                '#AFAF61',
                '#6FB7B7',
                '#9999CC',
                '#B766AD'
            ],
            beforeUnit: '' //转换之前的单位
        }
    },
    computed: {},
    watch: {},
    mounted() {
        // console.log(this.postData, '3333333333333')
        // console.log(this.postData.label, '44444444444')
        // if (this.postData.label) {
        //     this.postData.text = this.postData.label.text
        // }
        // this.postData.text = this.postData.label.text
    },
    methods: {
        changeSlider(e, prop) {
            let val = { e: e, prop: prop }
            this.$emit('changeSlider', val)
        },
        blurName(e, prop) {
            let val = { e: e, prop: prop }
            this.$emit('blurName', val)
        },
        blurUnit(e, prop) {
            if (prop == 'layer') {
                //   console.log(this.$refs.cascaderHandle);
                this.$refs.cascaderHandle[0].dropDownVisible = false
            }
            let val = { e: e, prop: prop }
            this.$emit('blurUnit', val)
            this.$forceUpdate()
        },
        focus(e) {
            this.beforeUnit = e
        },
        changeUnit(e, prop) {
            // console.log(e, 'ttttt')
            this.$forceUpdate()
            let val = { e: e, prop: prop, beforeUnit: this.beforeUnit }
            this.$emit('changeUnit', val)
        }
    }
}
</script>

<style>
/* element魔改 */
/* input框 */
.tableInput .el-input__inner {
    background: none !important;
    color: #fff !important;
}
/* 级联 */
.el-cascader-menu {
    min-width: 150px !important;
}
.el-cascader-node__label {
    color: #fff !important;
    font-size: 12px !important;
}
.el-cascader-node:hover {
    background: #1c3b3a !important;
}
/* 选择框下拉 */
.el-select-dropdown__list {
    padding: 0 !important;
}
.el-select-dropdown__item.selected {
    color: #fff !important;
}
.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
    background: #1c3b3a !important;
}
/* 单位选择下拉框 */
.unit .el-input__suffix {
    display: none !important;
}
.unit .el-input__inner {
    padding: 0 10px !important;
}
.el-popper.unit li {
    padding: 0 5px 0 10px !important;
}
.el-popper.unit {
    min-width: 47px !important;
}
.el-popper {
    margin-top: 0px !important;
    background: rgb(63, 72, 84, 0.9) !important;
    min-width: 150px !important;
}
/* 选择框下拉的小三角 */
.popper__arrow {
    display: none !important;
}
.el-select-dropdown__item:hover {
    background: #1c3b3a !important;
}
/* radio框 */
.tableInput .el-radio__label {
    font-size: 12px !important;
}
.tableInput .el-radio__input.is-checked + .el-radio__label {
    color: #fff !important;
}
/* 颜色选择器 */
.m-colorPicker .box {
    position: fixed !important;
    background: transparent !important;
    background-color: rgba(63, 72, 84, 0.9) !important;
    color: #fff !important;
    z-index: 1002 !important;
}
.m-colorPicker h3 {
    color: #fff !important;
}
.m-colorPicker div {
    color: #fff !important;
}
.tableInput .el-slider__runway {
    margin-top: 12px !important;
}
/* .el-color-picker__panel{
     background:transparent !important;
     background-color:rgba(63,72,84, 0.9) !important;
     width: 272px !important;
}
.el-color-dropdown__main-wrapper{
    display: none !important;
}
.el-button--text{
    color: #fff !important;
} */
</style>
<style lang="scss" scoped>
ul {
    padding: 0;
    margin: 0;
}
li {
    font-size: 12px;
    color: #ffffff;
    border-bottom: 1px solid #ffffff;
    // border: 1px solid #ffffff;
    list-style-type: none;
    display: flex;
    justify-content: start;

    div {
        padding: 8px 10px;
    }
    div:nth-child(1) {
        width: 91px;
        border-right: 1px solid #ffffff;
    }
}
</style>
